<template>
  <div class="table-page">
    <div class="flex flex-j-s mb-10">
      <a-button type="text" :loading="loading" @click="getTableData(true)">
        <template #icon>
          <icon-refresh />
        </template>
        刷新当前数据
      </a-button>
    </div>
    <a-descriptions :column="1" bordered>
      <a-descriptions-item label="群内开启商品搜索自动回复">
        <GiDot :type="tableData.isOpenQlc ? 'success' : 'info'" :text="tableData.isOpenQlc ? '开启中' : '未开启'" />
      </a-descriptions-item>
      <a-descriptions-item label="群内开启淘口令自动回复">
        <GiDot :type="tableData.isOpenQls ? 'success' : 'info'" :text="tableData.isOpenQls ? '开启中' : '未开启'" />
      </a-descriptions-item>
      <a-descriptions-item label="私聊开启商品搜索自动回复">
        <GiDot :type="tableData.isOpenSlc ? 'success' : 'info'" :text="tableData.isOpenSlc ? '开启中' : '未开启'" />
      </a-descriptions-item>
      <a-descriptions-item label="私聊开启淘口令自动回复">
        <GiDot :type="tableData.isOpenSls ? 'success' : 'info'" :text="tableData.isOpenSls ? '开启中' : '未开启'" />
      </a-descriptions-item>
    </a-descriptions>
  </div>
</template>

<script setup>
import { detailConfigInfo } from '@/apis'
import { deleteEmpty } from '@/utils/common'
import GiDot from '@/components/GiDot/index.vue'
import { Message } from '@arco-design/web-vue'

const props = defineProps(['userWechatId'])

const loading = ref(false)
const tableData = ref([])

const listParams = reactive({
  userWechatId: undefined
})

// 获取列表数据
const getTableData = async (flag = false) => {
  try {
    loading.value = true
    listParams.userWechatId = props.userWechatId
    const res = await detailConfigInfo(deleteEmpty(listParams))
    tableData.value = res.data
    if (flag) {
      Message.success('刷新成功')
    }
  } finally {
    loading.value = false
  }
}

watch(
  () => props.userWechatId,
  () => {
    getTableData()
  },
  { deep: true, immediate: true }
)
</script>

<style lang="scss" scoped>
.table-page {
  height: 100%;
  overflow: hidden;
  background: var(--color-bg-1);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
</style>
